import React, { lazy, Suspense } from 'react';
import {HashRouter as Router, Route, Switch as RouteSwitch} from 'react-router-dom';
import { connect } from 'react-redux';
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { DatePicker, Switch } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import * as utils from '../../../assets/js/utils/index';
import * as Request from '../../../services/home/radar/index';
import action from '../../../store/actions/index';
import config from '../../../assets/js/conf/config';
import Css from '../../../assets/css/home/sate/index.css';
const ClassifyIndex = lazy(() => import('./classify'));

class Sate extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            bHide: false,
            sateList: [],
            aSateList: []
        }
    }

    componentDidMount(){
        this.getLeftList();
    }

    UNSAFE_componentWillReceiveProps(nextProps){
        switch(nextProps.location.pathname){
            case config.path+'home/sate':
                this.setState({ bHide: false });
            break;
            case config.path+'home/sate/classify':
                this.setState({ bHide: true });
            break;
            default:
                this.setState({ bHide: false });
            break;
        }
    }

    //开始时间确认
    startTimeOk(value){
        this.props.dispatch(action.sate.changeStartTime({ startTime: value }));
        this.getLeftList();
    }

    //结束时间确认
    endTimeOk(value){
        this.props.dispatch(action.sate.changeStartTime({ endTime: value }));
        this.getLeftList();
    }

    //获取左侧产品列表
    getLeftList(){
        setTimeout(() => {
            const startTime = moment(this.props.sate.startTime).format('YYYY-MM-DD HH:mm:ss');
            const endTime = moment(this.props.sate.endTime).format('YYYY-MM-DD HH:mm:ss');
            Request.getSateData({ startTime, endTime }).then(res => {
                if(res.retcode === '1'){
                    res.data.map((item, index) => item.checked = index === 0 ? true : false );
                    this.setState({ sateList: res.data }, () => {
                        this.getSateData(res.data[0].id);
                    });
                }
            });
        }, 0);
    }

    //获取卫星产品数据
    getSateData(id){
        const aTempSateList = utils.deepClone(this.state.sateList);
        const productCards = aTempSateList.filter(item => item.id === id)[0].children;
        this.setState({ aSateList: productCards });
    }

    //卫星列表选择
    selectSateItem(index){
        const aTempSateList = utils.deepClone(this.state.sateList);
        aTempSateList.map(item => item.checked = false);
        aTempSateList[index].checked = true;
        this.setState({ sateList: aTempSateList }, () => {
            this.getSateData(aTempSateList[index].id);
        });
        this.props.history.replace(config.path+'home/sate');
    }

    //卫星产品资源切换
    switchChange(checked){
        this.props.dispatch(action.sate.changeProductType({ checked }));
    }

    //获取卫星三级产品数据
    getSateClassify(data){
        this.props.dispatch(action.sate.getClassify({ sateData: data }));
        this.goPage('home/sate/classify');
    }

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    componentWillUnmount(){
        this.setState = (state, callback) => { 
            return ; 
        }
    }

    render(){
        const { sateList, aSateList, bHide } = this.state;
        const { startTime, endTime, checked } = this.props.sate;
        return (
            <div className={Css['sate']}>
                <div className={Css['sate-wrapper']}>
                    {/* 时间选择 */}
                    <div className={Css['select-wrapper']}>
                        <div className={Css['date-wrapper']}>
                            <div className={Css['clock']}><ClockCircleOutlined style={{color:'#B7FDFF',fontSize:'0.13rem'}} /></div>
                            <div className={Css['title']}>时间选择：</div>
                        </div>
                        <div className={Css['select-contents']}>
                            <DatePicker 
                                locale={locale} 
                                showTime 
                                defaultValue={startTime}
                                onOk={(value) => this.startTimeOk(value)}
                                suffixIcon={<div className="clock-icon"></div>}
                                style={{width:'163px',minWidth:'auto',marginRight:'0.12rem'}} 
                            />
                            <DatePicker 
                                locale={locale} 
                                showTime 
                                defaultValue={endTime}
                                onOk={(value) => this.endTimeOk(value)} 
                                suffixIcon={<div className="clock-icon"></div>}
                                style={{width:'163px',minWidth:'auto'}}
                            />
                        </div>
                    </div>
                    {/* 雷达类型选择 */}
                    <div className={Css['radar-type']}>
                        {
                            sateList.length > 0 ? sateList.map((item, index) => {
                                return (
                                    <div key={item.id} className={item.checked ? Css['item']+' '+Css['active'] : Css['item']} onClick={() => this.selectSateItem(index, item.type)}>
                                        <div className={Css['title']}>{item.sate_name}</div>
                                        <div className={Css['img']}>
                                            <img src={item.glb_filepath} alt='loading' />
                                        </div>
                                    </div>
                                )
                            }) : ''
                        }
                    </div>
                </div>
                {/* 产品模块 */}
                <div className={Css['product-wrapper']}>
                    <div className={Css['product-switch']}>
                        <Switch checked={checked} checkedChildren="产品图" unCheckedChildren="实况" onChange={(checked) => this.switchChange(checked)} />
                    </div>
                    <div className={bHide ? Css['product-contents']+' hide' : Css['product-contents']}>
                        <div className={Css['inner-box']}>
                            {
                                aSateList.length > 0 ? aSateList.map((item, index) => {
                                    return (
                                        <div key={item.id} className={index%3 === 0 ? Css['card'] : Css['card']+' '+Css['step']} onClick={() => this.getSateClassify(item.children)}>
                                            <div className={Css['title']}>{item.sate_name}</div>
                                            <div className={Css['img']}><img src={item.glb_filepath} alt='loading' /></div>
                                        </div>
                                    )
                                }) : <div className='null-item'><img src={require('../../../assets/images/common/empty.png')} alt="loading" />暂无数据</div>
                            }
                        </div>
                    </div>
                    <Router>
                        <Suspense fallback={<React.Fragment/>}>
                            <RouteSwitch>
                                <Route path={config.path+'home/sate/classify'} component={ClassifyIndex}></Route>
                            </RouteSwitch>
                        </Suspense>
                    </Router>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(Sate);